<template>
	<view class="fab-container">
		<!-- 遮罩层 -->
		<view class="fab-mask" :class="{'show': fabMenuOpen}" @click="toggleFabMenu"></view>
		<!-- 悬浮按钮组 -->
		<view class="fab-container">
			<!-- 主按钮 -->
			<view class="fab-main" :class="{'rotate-in': fabMenuOpen}" @click="toggleFabMenu">
				<uni-icons type="bars" size="24" color="#fff"></uni-icons>
			</view>

			<!-- 圆形图标子菜单 -->
			<view class="fab-menu">
				<view v-for="(item, index) in fabItems" :key="index" class="fab-icon-item"
					:class="{'show': fabMenuOpen}" :style="{
            'transition-delay': `${index * 50}ms`,
            'background-color': item.color
          }" @click="handleFabClick(item.action)">
					<button class="share-btn" hover-class="none" open-type="share" v-if="item.action=='share'">
						<uni-icons :type="item.icon" size="20" color="#fff"></uni-icons>
					</button>
					<uni-icons :type="item.icon" size="20" color="#fff" v-else></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'fab-menu',
		emits: ['action'],
		props: {
			fabItems: {
				type: Object,
				default () {
					return {}
				}
			}
		},

		data() {
			return {
				fabMenuOpen: false
			}
		},
		methods: {
			toggleFabMenu() {
				this.fabMenuOpen = !this.fabMenuOpen
			},
			handleFabClick(action) {
				this.$emit('action', action)
				this.fabMenuOpen = false
			}
		}
	}
</script>

<style lang="scss">
	.fab-container {
		position: fixed;
		left: 20px;
		bottom: 20px;
	}

	/* 主按钮样式保持不变 */
	.fab-main {
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background-color: #5c5cff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 8px rgba(0, 122, 255, 0.3);
		transition: all 0.3s ease;

		&.rotate-in {
			transform: rotate(90deg);
			background-color: #ff5a5f;
		}
	}

	.share-btn {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #4a8cff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		margin: 0;
		padding: 0;
		border: none;
	}

	/* 圆形图标子菜单样式 */
	.fab-menu {
		position: absolute;
		bottom: 52px;
		right: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fab-icon-item {
		width: 42px;
		height: 42px;
		border-radius: 50%;
		margin-bottom: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		transform: scale(0);
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

		&.show {
			transform: scale(1);
			opacity: 1;
		}

		/* 按压反馈效果 */
		&:active {
			transform: scale(0.9) !important;
		}
	}

	/* 遮罩层样式保持不变 */
	.fab-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;

		&.show {
			opacity: 1;
			visibility: visible;
		}
	}
</style>